<template>
	<u-picker :show="froolShow" ref="uPicker" :columns="columns" @confirm="confirm" @cancel='cancel'
		@change="changeHandler" keyName="name" :closeOnClickOverlay='true' @close='cancel'></u-picker>
</template>

<script>
	export default {
		props: {
			froolShow: [Boolean, String, Number],
			isCen: [Boolean, String, Number],
		},
		data() {
			return {
				froolList: [],
				columns: [

				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
				],
				floor_id: '',
				floor_name: '',
				storey_id: '',
				storey_name: '',
				room_id: "",
				room_name: '',
				nickname:''
			}
		},
		mounted() {
			this.getfool()
			console.log('this.isCen', this.isCen)
		},
		methods: {
			async getfool() {
				const picker = this.$refs.uPicker
				const {
					data
				} = await this.$request(this.$Api.anchorFloor, {

				}, "POST")
				if (data.code !== 0) return
				this.froolList = data.data.list
				this.floor_id = data.data.list[0].floor_id
				this.floor_name = data.data.list[0].name
				if (data.data.list[0].storey) {
					this.storey_id = data.data.list[0].storey[0].storey_id
					this.storey_name = data.data.list[0].storey[0].name
					this.nickname = data.data.list[0].storey[0].nickname
					console.log('1321321321', this.storey_id)
					if (data.data.list[0].storey[0].room) {
						if (this.isCen == 2) {

						} else {
							this.room_id = data.data.list[0].storey[0].room[0].room_id
							this.room_name = data.data.list[0].storey[0].room[0].name
							console.log('1321323213213211321', this.room_id)
						}

					}
				}
				this.columnData = data.data.list[0].storey
				picker.setColumnValues(0, data.data.list)
				picker.setColumnValues(1, data.data.list[0].storey)
				if (this.isCen == 2) return
				picker.setColumnValues(2, data.data.list[0].storey[0].room)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker,
					indexs
				} = e
				console.log('this.froolList[index].storey', e, columnIndex)
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					if (this.froolList[0].storey) {
						picker.setColumnValues(1, this.froolList[index].storey || [])
						if (this.isCen == 2) {

						} else {
							if (this.froolList[0].storey[0]) {
								picker.setColumnValues(2, this.froolList[indexs[0]].storey[0].room || [])
							} else {
								picker.setColumnValues(2, [])
							}
						}

					} else {
						picker.setColumnValues(1, [])
						picker.setColumnValues(2, [])
					}
				} else if (columnIndex == 1) {
					if (this.isCen == 2) return
					if (this.froolList[0].storey[0].room) {
						picker.setColumnValues(2, this.froolList[indexs[0]].storey[indexs[1]].room || [])
					} else {
						picker.setColumnValues(2, [])
					}
				}

			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs
				} = e
				if (value[0]) {
					this.floor_id = value[0].floor_id
					this.floor_name = value[0].name
				}
				if (value[1]) {
					this.storey_id = value[1].storey_id
					this.storey_name = value[1].name
					this.nickname = value[1].nickname
				}
				if (value[2]) {
					this.room_id = value[2].room_id
					this.room_name = value[2].name
				}
				console.log('confirmconfirm', e)
				const params = {
					storey_id: this.storey_id,
					floor_id: this.floor_id,
					room_id: this.room_id,
					room_name: this.room_name,
					floor_name: this.floor_name,
					storey_name: this.storey_name,
					nickname:this.nickname
				}
				this.$emit('confirm', params)
				this.$emit('cancel')
			},
			cancel() {
				this.$emit('cancel')
			}
		}
	}
</script>